<template>
    <div id="box">
      <div class="top_box">
        <p>{{$store.state.user_info.mobile}}</p>
        <p>{{$store.state.user_info.mobile}}</p>
      </div>
      <ul>
        <li><img src="../../static/img/account/总资产.png" alt=""><span>总资产</span></li>
        <li v-for="(item,index) in tools"><img :src="item.img"><span>{{item.text}}</span></li>
      </ul>
      <button @click="$store.commit('add_user')">点击退出</button>
    </div>
</template>

<script>
    export default {
      data () {
        return {
          tools:[
            {img:"../../static/img/account/总资产.png", text:"总资产"},
            {img:"../../static/img/account/充值.png", text:"充值"},
            {img:"../../static/img/account/提现.png", text:"提现"},
            {img:"../../static/img/account/银行卡.png", text:"银行卡管理"},
            {img:"../../static/img/account/密码管理.png", text:"密码管理"},
            {img:"../../static/img/account/银行卡.png", text:"钱包地址管理"},
            {img:"../../static/img/account/实名认证.png", text:"实名认证"}
          ]
        }
      },
      created(){
        // console.log(this.$store.state.user_info);
      }
    }
</script>

<style lang="less" scoped>
  @import "../style/var.less";
  #box{
    .full;
    background: #ffffff;
    .top_box{
      .full-w;
      height: 1.8rem;
      background: #ffac04;
      padding:0.55rem 0 0 0.55rem;
      &>p{
        color: #ffffff;
        &:nth-child(1){
          font-size: 0.28rem;
          margin-bottom: 0.36rem;
        }
        &:nth-child(2){
          font-size: 0.16rem;
        }
      }
    }
    &>ul{
      .full-w;
      padding-left: 0.36rem;
      li{
        .flex;
        .align-items;
        height: 0.9rem;
        border-bottom: 0.01rem solid #e1e1e3;
        img{
          margin-left: -0.1rem;
          max-width: 0.3rem;
          margin-right: 0.27rem;
        }
        span{
          font-size: 0.2rem;
          color: #616161;
        }
      }
    }
    &>button{
      width: 1.8rem;
      height: 0.54rem;
      background: #ff9c00;
      color: #ffffff;
      border: 0.01rem solid #ef931b;
      outline: none;
      border-radius: 0.3rem;
      margin: 0.55rem 0 0 50%;
      transform: translateX(-50%);
      font-size: 0.22rem;
    }
    &>button:active{
      background: #80561a;
      color:#8a837b;
      border: 0.01rem solid #725420;
    }
  }
</style>
